<template>
  <div
    class="
      h-full
      bg-white
      rounded-content-wrap
      p-5
      flex flex-col
      justify-between
    "
  >
    <el-form
      ref="ruleForm"
      v-loading="loading"
      :model="form"
      :rules="rules"
      label-position="left"
      hide--asterisk
    >
      <!-- 上传头像 -->
      <el-form-item label="" prop="imgList" class="flex flex-col">
        <template #label>
          <div class="h-[30px]">机构logo</div>
        </template>
        <CustomUpload class="mt-2" :img-list.sync="form.imgList" />
      </el-form-item>

      <!-- 机构名称 -->
      <el-form-item label="" prop="name" class="w-[718px]">
        <template #label>
          <div class="requ">机构名称</div>
        </template>
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>

      <!-- 机构简称 -->
      <el-form-item label="" prop="shortName" class="w-[718px]">
        <template #label>
          <div class="">机构简称</div>
        </template>
        <el-input v-model="form.shortName" placeholder="请输入" />
      </el-form-item>

      <!-- 机构地址 -->
      <el-form-item label="" prop="addrs" class="mb-4 w-[718px]">
        <template #label>
          <div class="">机构地址</div>
        </template>
        <el-input
          v-model="form.addrs"
          readonly
          placeholder="点击右侧按钮在地图上选点"
        >
          <i
            slot="suffix"
            class="
              el-icon-location-outline
              text-2xl
              pr-1
              pt-[4px]
              cursor-pointer
            "
            @click="isShowMap = true"
          />
        </el-input>
      </el-form-item>

      <PositionPicker
        :visible.sync="isShowMap"
        :position.sync="form.position"
        :addrs.sync="form.addrs"
      />
    </el-form>

    <Save pre-label="取消" :disabled="loading" @onSave="handleSave" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import PositionPicker from '@/components/admin/manage/carrier/common/CustomAMap/PositionPicker.vue'
import Save from '@/components/admin/manage/portal/common/Save.vue'
import CustomUpload from '@/components/admin/manage/carrier/common/CustomUpload/index.vue'
import { upsert, IUpsertParams, detail } from '@/api/commonInstance'
import { DBNames } from '@/enum/dbName'

export default Vue.extend({
  components: { PositionPicker, Save, CustomUpload },
  data() {
    return {
      loading: false,
      isShowMap: false,
      form: {
        name: '',
        shortName: '',
        addrs: '',
        position: '',
        imgList: [],
      },
      rules: {
        // name: { required: true, message: '请输入机构名称', trigger: 'blur' },
      },
    }
  },
  head: {
    title: '机构信息',
  },
  computed: {
    ...mapGetters('user', ['accountId']),
  },
  watch: {
    accountId: {
      immediate: true,
      handler(id) {
        if (id) {
          detail({
            id,
            templateName: DBNames.C_SYS_ORG_INFO,
          }).then((result) => {
            if (result) {
              this.initForm(result.data)
            }
          })
        }
      },
    },
  },
  methods: {
    initForm(data: any) {
      const { form } = this as any
      Object.keys(form).forEach((key) => {
        // @ts-ignore
        const value = data[key]
        if (value) {
          form[key] = value
        }
      })
    },
    handleSave() {
      const { form, accountId } = this
      if (!accountId) {
        this.$router.push('/login')
      } else {
        this.$refs.ruleForm.validate(async (valid: boolean) => {
          if (valid) {
            this.loading = true

            const params: IUpsertParams = {
              id: accountId,
              data: form,
              templateName: DBNames.C_SYS_ORG_INFO,
            }

            await upsert(params)

            this.loading = false
          }
        })
      }
    },
  },
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
